<template>
  <!-- 弹框 -->
  <el-dialog
    :close-on-click-modal="false"
    :visible="showDialog"
    :before-close="handleClose"
    width="680px"
    :title="title"
  >
    <!-- 表单接口 -->
    <div class="form-container">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        label-position="top"
      >
        <el-form-item label="计费规则编号" prop="ruleNumber">
          <el-input v-model="addForm.ruleNumber" />
        </el-form-item>
        <el-form-item label="计费规则名称" prop="ruleName">
          <el-input v-model="addForm.ruleName" />
        </el-form-item>
        <el-form-item label="计费方式" prop="chargeType">
          <el-radio-group v-model="addForm.chargeType" size="small">
            <el-radio label="duration" border>时长收费</el-radio>
            <el-radio label="turn" border>按次收费</el-radio>
            <el-radio label="partition" border>分段收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <div
          class="flex-container"
          style="display: flex; justify-content: space-between"
        >
          <el-form-item label="免费时长（分钟）">
            <el-input v-model="addForm.freeDuration" />
          </el-form-item>
          <el-form-item label="收费上限（元）">
            <el-input v-model="addForm.chargeCeiling" />
          </el-form-item>
        </div>
        <el-form-item label="计费规则" :required="true">
          <!-- 按时长收费区域 -->
          <div
            class="duration"
            v-if="addForm.chargeType === 'duration'"
            style="display: flex"
          >
            每
            <el-form-item prop="durationTime">
              <el-input
                v-model="addForm.durationTime"
                class="input-box hours"
              />
            </el-form-item>
            小时
            <el-form-item prop="durationPrice">
              <el-input
                v-model="addForm.durationPrice"
                class="input-box yuan"
              />
            </el-form-item>
            元
          </div>
          <!-- 按次收费区域 -->
          <div
            class="turn"
            v-if="addForm.chargeType === 'turn'"
            style="display: flex"
          >
            每次
            <!-- 知识点：el-form-item标签可以嵌套使用，而且表单校验也只需要加prop属性即可，这样子可以灵活的进行表单验证 
                 如：当前el-form-item外面嵌套了一个 大的el-form-item
            -->
            <el-form-item prop="turnPrice">
              <el-input
                v-model="addForm.turnPrice"
                class="input-box"
                style="width: 150px"
              />
            </el-form-item>
            元
          </div>
          <!-- 按分段收费区域 -->
          <div class="partition" v-if="addForm.chargeType === 'partition'">
            <div class="item" style="display: flex">
              <el-form-item prop="partitionFrameTime">
                <el-input
                  v-model="addForm.partitionFrameTime"
                  class="input-box"
                  style="width: 100px"
                />
              </el-form-item>
              小时内,每小时收费
              <el-form-item prop="partitionFramePrice">
                <el-input
                  v-model="addForm.partitionFramePrice"
                  class="input-box"
                  style="width: 100px"
                />
              </el-form-item>
              元
            </div>
            <div class="item" style="display: flex; margin: 30px auto 0">
              每增加
              <el-form-item prop="partitionIncreaseTime">
                <el-input
                  v-model="addForm.partitionIncreaseTime"
                  class="input-box"
                  style="width: 120px"
                />
              </el-form-item>
              小时,增加
              <el-form-item prop="partitionIncreasePrice">
                <el-input
                  v-model="addForm.partitionIncreasePrice"
                  class="input-box"
                  style="width: 120px"
                />
              </el-form-item>
              元
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitForm()"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import {
  addRuleAPI,
  updateRuleDetailAPI,
  getRuleDetailAPI
} from '@/api/CardRule'
export default {
  data () {
    return {
      addForm: {
        ruleNumber: '', // 计费规则编号
        ruleName: '', // 计费规则名称
        chargeType: 'duration', // 计费规则类型 duration / turn / partition
        freeDuration: null,
        chargeCeiling: null,

        // 时长计费独有字段
        durationTime: null, // 时长计费单位时间
        durationPrice: null, // 时长计费单位价格
        durationType: 'hour',

        // 按次收费独有字段
        turnPrice: null,
        // 分段计费独有字段
        partitionFrameTime: null, // 段内时间
        partitionFramePrice: null, // 段内费用
        partitionIncreaseTime: null, // 超出时间
        partitionIncreasePrice: null // 超出费为收费价钱
      }, // 计费规则表单对象
      addFormRules: {
        ruleNumber: [
          { required: true, message: '请输入规则编号', trigger: 'blur' }
        ],
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        chargeType: [
          { required: true, message: '请选择收费类型', trigger: 'blur' }
        ],
        durationTime: [
          { required: true, message: '请输入时间', trigger: 'blur' }
        ],
        durationPrice: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        turnPrice: [{ required: true, message: '请输入次数', trigger: 'blur' }],
        partitionFrameTime: [
          { required: true, message: '请输入段内时间', trigger: 'blur' }
        ],
        partitionFramePrice: [
          { required: true, message: '请输入段内费用', trigger: 'blur' }
        ],
        partitionIncreaseTime: [
          { required: true, message: '请输入超出时间', trigger: 'blur' }
        ],
        partitionIncreasePrice: [
          { required: true, message: '请输入超出金额', trigger: 'blur' }
        ],
        freeDuration: [
          { required: true, message: '请输入免费时长', trigger: 'blur' }
        ],
        chargeCeiling: [
          { required: true, message: '请输入收费上限', trigger: 'blur' }
        ]
      }, // 计费规则校验规则对象
      title: '' // 组件标题、动态展示
    }
  },
  //控制弹层的隐藏和显示
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    //重置表单
    resetAddForm () {
      this.addForm = {
        ruleNumber: '',
        ruleName: '',
        chargeType: 'duration',
        freeDuration: null,
        chargeCeiling: null,
        // 时长计费独有字段
        durationTime: null,
        durationPrice: null,
        durationType: 'hour',
        // 按次收费独有字段
        turnPrice: null,
        // 分段计费独有字段
        partitionFrameTime: null,
        partitionFramePrice: null,
        partitionIncreaseTime: null,
        partitionIncreasePrice: null
      }
    },
    //数据回显
    // 知识点：子组件可以构建一个方法，让父组件调用，这样子可以减少父传子的参数。也是父子通讯的一种形式
    async getRuleByID (id) {
      const { data } = await getRuleDetailAPI(id)
      this.addForm = data
    },
    submitForm () {
      this.$refs.addForm.validate(async valid => {
        if (!valid) return
        if (this.addForm.id) {
          await updateRuleDetailAPI(this.addForm)
          this.$message.success('修改规则成功')
        } else {
          await addRuleAPI(this.addForm)
          this.$message.success('添加规则成功')
        }
        // 刷新列表
        this.$emit('getRuleList')
        this.handleClose()
      })
    },

    handleClose () {
      // 知识点：子组件中调用父组件的属性和方法，有三种方式（推荐使用2、3）
      // 1.this.$parent 可以获取父组件对象，通过对象可以获取属性和方法
      // 2.子传父方式。自定义事件this.$emit('事件名')，父组件接收方法，
      // 3.使用.sync修饰符实现父子双向绑定，需要给自定义事件（值可以是属性、方法等）名加update前缀，如下面的代码
      // this.$parent.showDialog = false
      this.$emit('update:showDialog', false) // 注意自定义事件的名字是需要双向绑定的属性名
      delete this.addForm.id // 记得删除id，后端根据id判断新增和修改

      this.$refs.addForm.resetFields()
      this.resetAddForm()

      this.addForm.freeDuration = null
      this.addForm.chargeCeiling = null
      // console.log(this.addForm);
    }
  },
  // 知识点：这里使用侦听器来实现表单校验清楚功能，实际上也可以使用elmui提供的change事件来做（注意：文档只在案例中提及这个方法，没有总结到下面）
  watch: {
    'addForm.chargeType' (val) {
      // console.log(val)
      // 知识点：这类型输入框可以一次性直接全部清空，而不用像下面那样用条件分支写，麻烦
      if (val === 'duration') {
        this.$refs.addForm.clearValidate([
          'turnPrice',
          'partitionFrameTime',
          'partitionFramePrice',
          'partitionIncreaseTime',
          'partitionIncreasePrice'
        ])
      } else if (val === 'turn') {
        this.$refs.addForm.clearValidate([
          'durationPrice',
          'durationTime',
          'partitionFrameTime',
          'partitionFramePrice',
          'partitionIncreaseTime',
          'partitionIncreasePrice'
        ])
      } else {
        this.$refs.addForm.clearValidate([
          'turnPrice',
          'durationPrice',
          'durationTime'
        ])
      }
      // 知识点：（背景：嵌套使用了两层el-form-item，最外层的item没有加上prop属性，此时不显示必填样式*，需求是要显示*）
      // 添加feeRuleProp属性是为了控制计费规则展示为必填项（前面加上*），因为计费规则下面的所有字段都是必填的，
      // 所以：
      // 1.可以给【最外层】的el-form-item加上prop=feeRuleProp，feeRuleProp的值可以取任意一个计费方式下的计费规则的prop值
      // 2.可以给【最外层】的el-form-item加上 required属性即可（推荐，官方用法）
    }
    // 知识点：同步父组件传递给子组件的对象值，可以使用：父组件传值+子组件watch  的方式
  }
}
</script>
<style lang="scss" scoped>
.form-container {
  padding: 0px 80px;
  .hours,
  .yuan {
    width: 212px;
  }
}
</style>
